import React from 'react';
import {
  Platform,
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
  StatusBar
} from 'react-native';
import PropsType from 'prop-types';
import { shallowEqualImmutable } from 'react-immutable-render-mixin';
import Icon from 'react-native-vector-icons/Ionicons';
import BaseComponent from './BaseComponent';
import styles from './css/LXNavBar';

export default class LXNavBar extends BaseComponent {
    static defaultProps = {
        title : '',
        navStyle : {},
        titleColor:'#f0ca78',
        titleStyle : {},
        backColor : 'gray',
        androidBgColor:'black',
        customBar : undefined,
        showRightItem : true,
        enableBackBtn : true,
        androidBgColor:'black',
        barStyle:'light-content',
        rightItem : ()=>(<View/>)
    }

    constructor(props){
      super(props);
      this.state = {
        group_type:null
      }
    }

    componentDidMount(){
      // this.groupTypeCallBack((group_type)=>{
      //   this.setState({group_type});
      // })
    }

    static propTypes = {
        title : PropsType.string,         //设置导航条标题
        navStyle : PropsType.object,      //设置导航条附加样式
        titleStyle : PropsType.object,    //设置导航条title样式
        backColor : PropsType.string,     //设置导航条背景色
        customBar : PropsType.func,       //如果传此参数则为自定义导航条
        showRightItem : PropsType.bool,   //是否显示右边按钮
        rightItem : PropsType.func,       //设置右边的Item按钮
        enableBackBtn : PropsType.bool,    //是否显示返回按钮
        barStyle: PropsType.string,
        androidBgColor: PropsType.string
    }

    shouldComponentUpdate(nextProps, nextState) {
        return !shallowEqualImmutable(this.props, nextProps)
            || !shallowEqualImmutable(this.state, nextState);
    }

    render(){
        const {
          navigation,
          enableBackBtn,
          navStyle,
          titleColor,
          titleStyle,
          rightItem,
          title,
          customBar,
          barStyle,
          androidBgColor,
          backColor} = this.props;
        // let rightBarItem = rightItem===undefined?(<View/>):rightItem;
        let app_style = {}
        let appback = backColor
        let titleAppColor = titleColor
        let Nav = (IS_IOS?<View style={[styles.navStyle,navStyle,app_style]}>
            <StatusBar
                backgroundColor="black"
                barStyle={barStyle}
            />
            <TouchableOpacity style={styles.navLeftBtn} onPress={()=>{
                enableBackBtn&&navigation.goBack();
            }}>
                {enableBackBtn&&<Icon name='ios-arrow-back'
                size={30}
                color={appback}
                style={{marginLeft:13}}/>}
            </TouchableOpacity>
            <View style={[styles.titleView,titleStyle]}>
                <Text style={[styles.title,{color:titleAppColor}]}>{title}</Text>
            </View>
            <View>
                {rightItem()}
            </View>
            
        </View>:<View style={[styles.navStyle,navStyle,app_style]}>
            <StatusBar
                backgroundColor={androidBgColor}
                barStyle="light-content"
            />
            <TouchableOpacity style={styles.navLeftBtn} onPress={()=>{
                enableBackBtn&&navigation.goBack();
            }}>
                {enableBackBtn&&<Icon name='ios-arrow-back'
                size={30}
                color={appback}
                style={{marginLeft:13}}/>}
            </TouchableOpacity>
            <View style={[styles.titleView,titleStyle]}>
                <Text style={[styles.title,{color:titleAppColor}]}>{title}</Text>
            </View>
            <View>
                {rightItem()}
            </View>
        </View>);
        
        //自定义导航
        if(customBar!=undefined){
            Nav = customBar;
        }


        return (Nav)
    }
}